$(() => {
    const layer = layui.layer;
    const form = layui.form;
    const laypage = layui.laypage

    // 定义美化时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
        const dateTime = new Date(date);

        const y = dateTime.getFullYear();
        const m = padZero(dateTime.getMonth() + 1);
        const d = padZero(dateTime.getDate());

        const hh = padZero(dateTime.getHours());
        const mm = padZero(dateTime.getMinutes());
        const ss = Math.round(padZero(dateTime.getSeconds()));

        return y + '-' + m + '-' + d + ' ' + hh + ":" + mm + ":" + ss;
    }

    function padZero(data) {
        return data > 9 ? data : '0' + data;
    }

    // 定义一个查询的参数对象
    const demand = {
        pagenum: 1,       // 页码,默认:1
        pagesize: 2,     //每页显示几条数据,默认:2
        cate_id: '',     //文章分类id
        state: ''        //文章的发布状态:已发布/草稿
    };

    initTable();
    initCate();

    // 获取文章列表数据的方法
    function initTable() {
        $.ajax({
            method: 'GET',
            url: '/my/article/list',
            data: demand,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }

                console.log(res);
                // 使用模板引擎渲染页面数据
                const htmlStr = template("tpl-table", res);
                $("tbody").html(htmlStr);
                // console.log(res.total);
                // 渲染分页
                renderPage(res.total);
            }
        });
    }

    // 初始化文章分类的方法
    function initCate() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }
                // 调用模板引擎渲染分类的可选项
                const htmlStr = template('tpl-cate', res);
                $("[name=cate_id]").html(htmlStr);
                // 通过layui,重新渲染(刷新)表单数据
                form.render('select');
            }
        });
    }

    // 为筛选表单绑定 submit
    $("#form-search").on('submit', function (e) {
        e.preventDefault();
        // 获取表单选中项的值
        const cate_id = $('[name=cate_id]').val();
        const state = $('[name=state]').val();
        // 赋值到q
        demand.cate_id = cate_id;
        demand.state = state;
        // 根据最新的筛选条件,重新渲染表格的数据
        initTable();
        // console.log(q);
    });

    // 定义渲染分页的方法
    function renderPage(total) {
        // total = 7;  //测试用,总条数
        // 渲染分页结构
        laypage.render({
            elem: 'pageBox',    // 存放分页的容器id
            count: total,       // 总数据条数
            limit: demand.pagesize,  // 每页显示数据条数,
            limits: [2, 3, 5, 10],    //每页条数(开启layout之后)
            curr: demand.pagenum,     // 设置默认被选中的分页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 自定义排版
            // 分页发生切换的时候,触发jump回调
            jump: function (obj, first) {    //first 判断是否初次加载(类似互斥锁)
                // console.log(obj.limit);
                // 将最新的条目数赋值到 查询参数中
                demand.pagesize = obj.limit;
                // 最新页码赋值到 查询参数中
                demand.pagenum = obj.curr;
                // 根据最新的 查询参数demand 获取数据列表,再渲染表格
                if (!first) {
                    initTable();
                }
            }
        });
    }

    // 事件委托之点击编辑事件
    let editIndex = null;
    $('tbody').on('click', '#btn-edit', function () {
        const editId= $(this).attr('data-Id');
        console.log(editId);
        sessionStorage.setItem('editId', editId);
        location.href = '/article/art_edit.html';
    });

    // 事件委托之删除点击事件 
    $('tbody').on('click', '#btn-delete', function () {
        // 获取删除按钮的个数
        let btnDelLength = $('#btn-delete').length;
        // 点击文章的Id
        const id = $(this).attr('data-id');
        layer.confirm('是否删除?', { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                method: 'GET',
                url: '/my/article/deletecate/' + id,
                success: function (res) {
                    console.log(id);
                    if (res.status !== 0) {
                        return layer.msg(res.message);
                    }
                    layer.msg(res.message);
                    // 当数据删除完成后,判断当前页是否还有剩余数据,否则页码-1
                    // 判断方法:当前页面还剩下多少删除按钮
                    if (btnDelLength <= 1) {
                        demand.pagenum = demand.pagenum === 1 ? 1 : demand.pagenum - 1;
                        initTable();
                        console.log(btnDelLength, demand.pagenum);
                    }
                }
            });

            layer.close(index);
        });
    });
});